<template>
  <el-tooltip
    class="item"
    effect="dark"
    :placement="position"
    :disabled="!show"
  >
    <div slot="content">
      <div class="word_wrap max_width" :style="{ width: contentWidth }">
        {{text}}
      </div>
    </div>
    <div
      v-if="flowType=='more'"
      ref="tooltip"
      @mouseover="showTooltip"
      :style="tooltipStyle"
    >
      <!-- 文本显示 -->
      <span style="width: 100%" class="tooltip-text" :style="{'-webkit-line-clamp': lineClamp }">{{ text }}</span>
    </div>
    <div
      v-if="flowType=='aline'"
      ref="tooltip"
      class="tooltip-box"
      @mouseover="showTooltip"
      :style="tooltipStyle"
    >
      <!-- 文本显示 -->
      <span style="width: 100%" class="tooltip-aline-text">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    // 显示文本
    text: {
      required: true
    },
    // 隐藏类型   aline：单行  more：多行
    flowType: {
      type: [String],
      default: 'aline'
    },
    // 宽度
    width: {
      type: [Number, String],
      required: true
    },
    // content 宽度
    contentWidth: {
      type: [String],
      default: '100%'
    },
    // 多行文本高度
    lineClamp: {
      type: [Number, String],
      default: '6'
    },
    // 显示位置与element一致
    position: {
      type: String,
      default: 'top'
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    tooltipStyle() {
      return {
        width: this.width.indexOf('%') > -1 ? this.width : `${this.width}px`
      }
    }
  },
  methods: {
    // 鼠标悬浮检测实际内容是否超出设定宽度
    showTooltip() {
      if (this.flowType=='more'){
        this.$nextTick(() => {
          const tooltipElement = this.$refs.tooltip;
          const textElement = tooltipElement.querySelector('.tooltip-text');
          if (textElement.scrollHeight > tooltipElement.offsetHeight) {
            this.show = true;
          }
        });
      }else {
        this.$nextTick(() => {
          if (this.width.indexOf('%') > -1) {
            if (this.$el.scrollWidth > this.$refs.tooltip.offsetWidth) {
              this.show = true
            }
          } else {
            if (this.$el.scrollWidth > this.width) {
              this.show = true
            }
          }
        })
      }
    }
  },
  mounted() {}
}
</script>
<style scoped>
.max_width{
  max-width: 800px;
}
.tooltip-box {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tooltip-aline-text {
  cursor: pointer;
}
.tooltip-text {
  cursor: pointer;
  display:-webkit-box;
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden; /* 隐藏超出范围的内容 */
  text-overflow: ellipsis; /* 使用省略号 */
}
</style>
